<template>
  <div class="page-register">
    <!-- 注册 -->
    <div class="box">
      <div class="tou">
        <img src="../../assets/images/logo.jpg" alt="">
      </div>
      <div class="name">
        <h1>PIM</h1>
        <p>专业的个人信息管理</p>
      </div>
      <el-form :rules="loginRules" :model="loginForm" class="form" ref="myform">
        <el-form-item prop="email">
          <el-input placeholder="Email" v-model="loginForm.email"></el-input>
        </el-form-item>
        <el-form-item prop="usname">
          <el-input placeholder="Usname" v-model="loginForm.usname"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="Passwodr" type="password" v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login-btn" @click="fn1">注 册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      loginForm: {
        email: '',
        password: '',
        usame: ''
      },
      loginRules: {
        email: [
          { required: true, message: '邮箱必须输入', trigger: 'blur' }
        ],
        usname: [
          { required: true, message: '邮箱必须输入', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    fn1 () {
      this.$refs.myform.validate((valid) => {
        if (!valid) {
          console.log('校验失败')
          return false
        }
        axios.post('http://10.20.154.115:3333/api/v1/signup', {
          email: this.loginForm.email,
          password: this.loginForm.password,
          username: this.loginForm.username
        }).then(response => {
          // let result = response.data
          this.$message({
            message: '注册成功',
            type: 'success'
          })
          this.$router.replace('/login')
        }).catch(err => {
          console.log(err)
          this.$message.error('注册失败，请重新注册')
        })
      })
    }
  }
}
</script>
<style lang="scss">
.page-register{
  height: 100%;
  overflow: hidden;
  background: #fafafa;

  .box{
    width: 430px;
    height: 509px;
    margin: 96px auto 0 auto;
    padding: 40px 10px 20px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 4px;

    .tou{
      width: 320px;
      height: 64px;
      margin: 0 auto;
      padding-bottom: 20px;
      text-align: center;
      img{
        width: 64px;
        height: 64px;
      }
    }

    .name{
      width: 320px;
      height: 73px;
      margin: 0 auto;
      text-align: center;

      h1{font-size: 32px;color: #000;line-height: 1.2;}
      p{font-size: 18px;color: #595959;margin-top: 8px;}
    }
    .form{
      max-width: 320px;
      margin: 32px auto 0;

      .login-btn{
        width: 100%;
      }
    }
  }
}
</style>
